<template>
  <!-- 单商品banner -->
  <view class="order-summary">
    <view class="summary-item">
      <view class="item-label">{{$t('clerk.orderNum')}}：</view>
      <view class="summary-content">{{ orderitem.order_no }}</view>
      <view class="copy-btn" @click="copyText(orderitem.order_no)">{{$t('person.copy')}}</view>
    </view>
    <view class="summary-item">
      <view class="item-label">{{$t('clerk.orderTime')}}：</view>
      <view>{{ orderitem.created_at | timestampToTime }}</view>
    </view>
    <view class="hold-line"><view></view></view>

    <view class="summary-item">
      <view class="item-label">{{$t('order.methods')}}：</view>
      <view>{{ $t('common.payMethod1') }}</view>
    </view>
    <view class="hold-line" v-if="orderitem.is_pay == 1">
      <view></view>
    </view>
    <view class="hold-line"><view></view></view>
    <view class="summary-item flex-space-between">
      <view class="item-label">{{$t('clerk.totalPrice')}}</view>
      <view
        >{{
          Number(orderitem.cost) +
          (orderitem.coupon ? Number(orderitem.coupon.sub_price) : 0)
        }}{{$t('shop.integral')}}</view
      >
    </view>
    <view class="summary-item flex-space-between" v-if="orderitem.coupon">
      <view class="item-label">{{$t('order.discount')}}</view>
      <view>-￥{{ orderitem.coupon.sub_price }}</view>
    </view>
    <!-- <view class="total-price">
      <text>需付款：</text>
      <text>￥{{ orderitem.cost }}</text>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: {},
    },
  },
  filters: {
    timestampToTime(timestamp) {
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let y = date.getFullYear();
      let M = month ? "0" + month : month;
      let d = day < 10 ? "0" + day : day;
      let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return `${y}-${M}-${d} ${h}:${m}:${s}`;
    },
  },
  computed: {
    //   0:微信，2:货到付款，3:余额，4:支付宝
    payTypeWord() {
      const Pay_Trans = {
        1: this.$t('common.payMethod1'),
        2: this.$t('common.payMethod2'),
        3: this.$t('common.payMethod3'),
        4: this.$t('common.payMethod4'),
      };
      return Pay_Trans[this.orderitem.pay_type] || null;
    },
  },
  methods: {
    copyText(data) {
      uni.setClipboardData({
        data: data,
        success() {
          uni.showToast({
            title: this.$t('admin.copySuc'),
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-summary {
  width: 100%;
  border-radius: 24rpx;
  background: #ffffff;
  padding: 40rpx 0;
  margin: 24rpx 0 295rpx 0;

  .summary-item {
    font-size: 26rpx;
    font-weight: 500;
    line-height: 44rpx;
    display: flex;
    align-items: center;
    color: #262626;
    margin-bottom: 34rpx;
    padding: 0 37rpx;

    .item-label {
      margin: 0 16rpx 0 37rpx;
      font-weight: 400;
    }

    .copy-btn {
      font-size: 22rpx;
      font-weight: 400;
      height: 34rpx;
      background: #f5f5f5;
      border-radius: 17rpx;
      padding: 0 13rpx;
      text-align: center;
      line-height: 34rpx;
      margin-left: 16rpx;
    }
  }

  .hold-line {
    margin-bottom: 40rpx;
    display: flex;
    justify-content: flex-end;
    view {
      width: 576rpx;
      height: 1rpx;
      background: #f2f2f2;
    }
  }

  .flex-space-between {
    justify-content: space-between;
  }

  .total-price {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #1a1a1a;
    padding: 0 37rpx;

    text:nth-child(2) {
      color: #f0250f;
      margin-left: 20rpx;
    }
  }
}
</style>
